<script setup>
import { collectSet, deviceCollection } from "@/api/Dev2Connection.js";

import { message } from "@/utils/message";
import {
  ref,
  toRefs,
  shallowRef,
  nextTick,
  watch,
  onMounted,
  onUnmounted
} from "vue";
import { protocolList } from "../assets/protocolList.js";
import {
  modifyDeviceList,
  deviceConfig,
  deviceCompile,
  deviceSend
} from "@/api/Dev2Connection.js";
import { useDrawerStore } from "@/store/drawerDataStores.js";
import componentList from "./index.js";
import { sendWebSocket, WebSocketOnclose } from "@/api/WebSocket";

const isDisabled = ref(true),
  ruleForm1 = ref({
    selectPeriod: "200ms",
    selectedFormat: "JSON",
    selectedProtocol: undefined
  }),
  ruleFormRefServer = ref(),
  ruleFormServer = ref({
    inputServer: "10.8.58.1:6443",
    inputTopics: "topic-dataLake"
  }),
  alertTitle = ref("无"),
  alertStatus = ref("info");

const props = defineProps({
  protocolConfigDrawer: {
    type: Boolean,
    default: false
  },
  devVarTableSelectedItem: {
    type: Object,
    default() {
      return {};
    }
  },
  collectSettingDrawer: {
    type: Boolean,
    default: false
  },
  devVarTableSelectedItem: {
    type: Object,
    default() {
      return {};
    }
  }
});
const { collectSettingDrawer } = toRefs(props);
const tableData = ref([]);
const drawerStore = useDrawerStore();

const childFuncRef = ref(),
  ruleFormRef = ref(),
  gatewayStatus = ref(""),
  protocolStatus = ref(""),
  compileRate = ref(0),
  issueRate = ref(0),
  compileDisabled = ref(true),
  issueDisabled = ref(true);
const protocolOptions = ref(); // 用来存储动态生成的协议选项
const { protocolConfigDrawer, devVarTableSelectedItem } = toRefs(props);
const emit = defineEmits(["childProtocolDrawer", "childGetApiTableDataList"]);

// 监听 tableData 变化，确保 selectedProtocol 跟着变
watch(
  () => tableData.value,
  async newVal => {
    if (newVal && newVal.length > 0) {
      ruleForm1.value.selectedProtocol =
        newVal[newVal.length - 1].selectedProtocol;
    } else {
      ruleForm1.value.selectedProtocol = "";
    }

    // 确保下拉框的选项包含最新的 selectedProtocol
    const protocols = [...new Set(newVal.map(row => row.selectedProtocol))];
    if (!protocols.includes(ruleForm1.value.selectedProtocol)) {
      protocols.push(ruleForm1.value.selectedProtocol);
    }
    protocolOptions.value = protocols.map(protocol => ({
      label: protocol,
      value: protocol
    }));
    await nextTick(); // 确保 Vue 重新渲染
  },
  { deep: true }
);

// 监听 selectedProtocol 变化，确保 UI 更新
watch(
  () => ruleForm1.value.selectedProtocol,
  (newVal, oldVal) => {
    console.log(`selectedProtocol 变更: ${oldVal} -> ${newVal}`);

    // 重新触发 UI 绑定，防止 Vue 绑定异常
    nextTick(() => {
      ruleForm1.value.selectedProtocol = newVal;
    });

    // 重置其他相关数据
    compileRate.value = 0;
    protocolStatus.value = "";
    issueRate.value = 0;
    gatewayStatus.value = "";
    issueDisabled.value = true;
    compileDisabled.value = true;
  }
);

onMounted(() => {
  // Socket初始化
  sendWebSocket(socket, 100);
});

onUnmounted(() => {
  WebSocketOnclose();
});

// websocket后端返回数据
const socket = SocketData => {
  console.log(SocketData);
  let compile_timer = 0;
  protocolStatus.value = SocketData.data;
  if (SocketData.data === "配置完成") {
    compileDisabled.value = false;
  }
  if (SocketData.data === "编译中") {
    compile_timer = setInterval(() => {
      if (compileRate.value < 90) {
        compileRate.value++;
      } else {
        clearInterval(compile_timer);
      }
    }, 60);
  } else if (SocketData.data === "编译完成") {
    compileRate.value = 100;
    issueDisabled.value = false;
    clearInterval(compile_timer);
  } else if (SocketData.data === "下发中") {
    if (SocketData.hasOwnProperty("chunk_number") && issueRate.value < 100) {
      let resFloatVal =
        (SocketData.chunk_number / SocketData.total_chunks) * 100;
      let resVal = resFloatVal.toFixed(2);
      console.log(resVal);
      issueRate.value = parseFloat(resVal);
    }
  } else if (SocketData.data === "下发完成") {
    issueRate.value = 100;
    gatewayStatus.value = "运行";
  }
};
// 协议更改事件
const protocolLabel = ref("");
const component = shallowRef(null);
const protocolChange = value => {
  // 打印切换协议时 devVarTableSelectedItem 和 updateUser 的值

  let strName = "";
  if (value) {
    protocolList.forEach(item => {
      if (item.value === value) {
        protocolLabel.value = item.label;
      }
    });
    strName = protocolLabel.value.replace(/\s+/g, "");
  }
  componentList.value.filter(item => {
    if (item.key === strName) {
      component.value = item.component;
    }
  });
  if (component.value) {
    nextTick(() => {
      childFuncRef.value.clearVar();
      childFuncRef.value.copyStore();
    });
  }
};

// 配置按钮
const configClick1 = formEl => {
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (valid) {
      alertTitle.value = "kafka服务器配置已完成，等待上传";
      alertStatus.value = "success";
    } else {
      console.log("error submit!", fields);
    }
  });
};
// 开始采集按钮
const startCollectClick = formEl => {
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (valid) {
      alertTitle.value = "采集中";
      isDisabled.value = false;
      alertStatus.value = "warning";
      let jsonString = {
        edge_getway_ID: devVarTableSelectedItem.value.gatewayId, //网关ID
        device_name: devVarTableSelectedItem.value.deviceName, //设备名称/编号
        type: "type_cmd", //类型为需求类型
        cmd: "collect_cmd",
        cycle: ruleForm1.value.selectPeriod, //采集周期
        storage_format: ruleForm1.value.selectedFormat, //存储格式
        storage_path:
          "/home/nvidia/PycharmProjects/ultimate_edge/log/data_out.json", //存储地址
        kafka: {
          bootstrap_servers: ruleFormServer.value.inputServer,
          topic: ruleFormServer.value.inputTopics
        }
      };
      let submitObject = {
        data: JSON.stringify(jsonString)
      };
      deviceCollection(submitObject)
        .then(res => {
          if (res.status === 200) {
            const messageElement = document.createElement("div");
            messageElement.textContent = "采集成功";
            messageElement.style.position = "fixed";
            messageElement.style.top = "-50px"; // 初始位置在视口上方
            messageElement.style.left = "50%";
            messageElement.style.transform = "translateX(-50%)";
            messageElement.style.backgroundColor = "#e6f7e6"; // 淡绿色背景
            messageElement.style.color = "#333";
            messageElement.style.padding = "15px 30px";
            messageElement.style.fontSize = "16px";
            messageElement.style.fontWeight = "normal";
            messageElement.style.zIndex = "99999";
            messageElement.style.borderRadius = "8px";
            messageElement.style.boxShadow = "0 2px 4px rgba(0, 0, 0, 0.1)";
            messageElement.style.opacity = "0"; // 初始透明度为 0
            messageElement.style.transition =
              "top 0.5s ease, opacity 0.5s ease"; // 过渡效果
            messageElement.style.display = "flex";
            messageElement.style.alignItems = "center";

            // 添加小勾图标的样式
            const checkIcon = document.createElement("span");
            checkIcon.innerHTML = "&#10004;"; // Unicode 绿色小勾
            checkIcon.style.color = "#52c41a"; // 设置勾的颜色为绿色
            checkIcon.style.fontSize = "20px";
            checkIcon.style.marginRight = "10px"; // 给小勾和文本之间一些间距

            // 将小勾图标插入到 messageElement 里
            messageElement.insertBefore(checkIcon, messageElement.firstChild);

            document.body.appendChild(messageElement);

            // 使用 setTimeout 触发过渡效果
            setTimeout(() => {
              messageElement.style.top = "20px"; // 滑动到目标位置
              messageElement.style.opacity = "1"; // 显示弹窗
            }, 0);

            // 在 5 秒后自动隐藏
            setTimeout(() => {
              messageElement.style.opacity = "0"; // 隐藏
              messageElement.style.top = "-50px"; // 滑动回去
              setTimeout(() => {
                document.body.removeChild(messageElement); // 隐藏后移除节点
              }, 500); // 等待过渡效果结束再移除
            }, 3000);
          } else {
            message(res.message, {
              type: "error",
              customClass: "custom-message",
              duration: 2500
            }); // 显示错误信息
          }
        })
        .catch(err => {
          console.log(err);
        });
      // collectSet({
      //   name: devVarTableSelectedItem.value.deviceName
      // }).then(res => {
      //   if (res.status === 200) {
      //     isDisabled.value = false;
      //     alertTitle.value = '采集中';
      //     alertStatus.value = 'warning';
      //   } else {
      //     message(res.message, { type: 'error' });
      //   }
      // })
    } else {
      console.log("error submit!", fields);
    }
  });
};

// 停止采集按钮
const stopCollectClick = () => {
  ruleFormRef.value.validate(valid => {
    if (valid) {
      isDisabled.value = true;
      alertTitle.value =
        "数据已保存在" + devVarTableSelectedItem.value.deviceName + "文件下";
      alertStatus.value = "success";
    } else {
      return false;
    }
  });
};

// 抽屉取消按钮
const cancelClick = () => {
  emit("childCollectDrawer", false);
};
// 抽屉确认按钮
const confirmClick = () => {
  emit("childCollectDrawer", false);
};

// 抽屉打开回调

const handleOpen = () => {
  let strName = "";
  let parsedProtocol = "";
  if (drawerStore.tableSelectedId === devVarTableSelectedItem.value.id) {
    const connectorData = devVarTableSelectedItem.value.createUser;
    if (connectorData) {
      const rows = connectorData.split(";").map(row => {
        const [inputGatewayId, selectedInterface, selectedProtocol] =
          row.split(",");
        return {
          inputGatewayId,
          selectedInterface,
          selectedProtocol
        };
      });
      if (rows.length > 0) {
        parsedProtocol = rows[rows.length - 1].selectedProtocol; // 使用最后一行的 selectedProtocol
      }

      tableData.value = rows; // 更新 tableData
    } else {
      tableData.value = undefined; // 如果没有 connector 数据，清空表格
    }

    protocolLabel.value = drawerStore.formTitle;
    protocolList.forEach(item => {
      if (item.value === drawerStore.selectedProtocol) {
        protocolLabel.value = item.label;
      }
    });
  } else if (devVarTableSelectedItem.value.state === 1) {
    // 解析 connector 数据
    const connectorData = devVarTableSelectedItem.value.createUser;
    if (connectorData) {
      const rows = connectorData.split(";").map(row => {
        const [inputGatewayId, selectedInterface, selectedProtocol] =
          row.split(",");
        return {
          inputGatewayId,
          selectedInterface,
          selectedProtocol
        };
      });
      if (rows.length > 0) {
        parsedProtocol = rows[rows.length - 1].selectedProtocol; // 使用最后一行的 selectedProtocol
      }
      tableData.value = rows; // 更新 tableData
      // 提取 unique 的 selectedProtocol 列表
      const protocols = [...new Set(rows.map(row => row.selectedProtocol))];
      protocolOptions.value = protocols.map(protocol => ({
        label: protocol,
        value: protocol
      }));
    } else {
      tableData.value = undefined; // 如果没有 connector 数据，清空表格
    }

    // 打印 tableData 的值
    console.log("tableData after parsing connector:", tableData.value);

    protocolList.forEach(item => {
      if (item.value === parsedProtocol) {
        protocolLabel.value = item.label;
      }
    });
    // 打印 tableData 的值
    ruleForm1.value = {
      selectedProtocol: parsedProtocol
    };
    protocolList.forEach(item => {
      if (item.value === parsedProtocol) {
        protocolLabel.value = item.label;
      }
    });
  } else if (!devVarTableSelectedItem.value.selectedProtocol) {
    component.value = null;
    return;
  }
  strName = protocolLabel.value.replace(/\s+/g, "");
  componentList.value.filter(item => {
    if (item.key === strName) {
      component.value = item.component;
    }
  });
  if (component.value) {
    nextTick(() => {
      childFuncRef.value.copyStore();
    });
  }
  // 设置 ruleForm1.value
  ruleForm1.value = {
    selectPeriod: "200ms",
    selectedFormat: "JSON",
    selectedProtocol:
      drawerStore.selectedProtocol || // 优先使用 drawerStore.selectedProtocol
      parsedProtocol || // 如果没有，则使用解析后的 selectedProtocol
      "" // 如果两者都为空，则使用空字符串
  };
};

// 抽屉关闭回调
const handleClose = () => {
  emit("childCollectDrawer", false);
};

// form子组件传值
// const childFormObjChange = formObj => {
//   console.log("childFormObjChange triggered", formObj); // 添加此行以检查是否调用
//   ruleFormRef.value.validate(valid => {
//     console.log("Validation result:", valid);
//     if (valid) {
//       childSubmitForm(formObj);
//     } else {
//       return false;
//     }
//   });
// };

const childFormObjChange = formObj => {
  ruleFormRef.value.validate((valid, invalidFields) => {
    if (valid) {
      childSubmitForm(formObj);
    } else {
      console.log("验证失败。");
      // 打印所有无效字段的错误信息
      if (invalidFields) {
        for (const [field, errors] of Object.entries(invalidFields)) {
          console.log(
            `字段 ${field} 的错误信息: ${errors.map(error => error.message).join(", ")}`
          );
        }
      }
    }
  });
};

// 子组件提交表单
const childSubmitForm = childObject => {
  let jsonString = {
    edge_getway_ID: devVarTableSelectedItem.value.gatewayId, //网关ID
    device_name: devVarTableSelectedItem.value.deviceName, //设备名称/编号
    type: "type_demand", //类型为需求类型
    demand: {
      protocol: {
        protocol_info: childObject.MQTTObj
      }
    }
  };
  let submitObject = {
    data: JSON.stringify(jsonString),
    id: devVarTableSelectedItem.value.id
  };
  // 调用 API 接口提交数据
  deviceConfig(submitObject)
    .then(res => {
      compileRate.value = 0;
      issueRate.value = 0;
      gatewayStatus.value = "预运行"; // 更新状态

      if (res.status === 200) {
        saveDeviceItem(childObject.SQLObj); // 保存设备项
        const messageElement = document.createElement("div");
        messageElement.textContent = "配置成功";
        messageElement.style.position = "fixed";
        messageElement.style.top = "-50px"; // 初始位置在视口上方
        messageElement.style.left = "50%";
        messageElement.style.transform = "translateX(-50%)";
        messageElement.style.backgroundColor = "#e6f7e6"; // 淡绿色背景
        messageElement.style.color = "#333";
        messageElement.style.padding = "15px 30px";
        messageElement.style.fontSize = "16px";
        messageElement.style.fontWeight = "normal";
        messageElement.style.zIndex = "99999";
        messageElement.style.borderRadius = "8px";
        messageElement.style.boxShadow = "0 2px 4px rgba(0, 0, 0, 0.1)";
        messageElement.style.opacity = "0"; // 初始透明度为 0
        messageElement.style.transition = "top 0.5s ease, opacity 0.5s ease"; // 过渡效果
        messageElement.style.display = "flex";
        messageElement.style.alignItems = "center";

        // 添加小勾图标的样式
        const checkIcon = document.createElement("span");
        checkIcon.innerHTML = "&#10004;"; // Unicode 绿色小勾
        checkIcon.style.color = "#52c41a"; // 设置勾的颜色为绿色
        checkIcon.style.fontSize = "20px";
        checkIcon.style.marginRight = "10px"; // 给小勾和文本之间一些间距

        // 将小勾图标插入到 messageElement 里
        messageElement.insertBefore(checkIcon, messageElement.firstChild);

        document.body.appendChild(messageElement);

        // 使用 setTimeout 触发过渡效果
        setTimeout(() => {
          messageElement.style.top = "20px"; // 滑动到目标位置
          messageElement.style.opacity = "1"; // 显示弹窗
        }, 0);

        // 在 5 秒后自动隐藏
        setTimeout(() => {
          messageElement.style.opacity = "0"; // 隐藏
          messageElement.style.top = "-50px"; // 滑动回去
          setTimeout(() => {
            document.body.removeChild(messageElement); // 隐藏后移除节点
          }, 500); // 等待过渡效果结束再移除
        }, 3000);
      } else {
        protocolStatus.value = "配置失败"; // 更新状态
        message(res.message, { type: "error" }); // 显示错误信息
      }
    })
    .catch(error => {
      console.error("提交失败:", error); // 打印错误信息
      protocolStatus.value = "配置失败"; // 更新状态
      message(error.message || "请求失败", { type: "error" }); // 显示错误信息
    });
};

// 保存显示已适配
const saveDeviceItem = childObject => {
  let readInfo = [];
  for (let i = 0; i < tableData.value.length; i++) {
    readInfo.push({
      inputGatewayId: tableData.value[i].inputGatewayId,
      selectedInterface: tableData.value[i].selectedInterface,
      selectedProtocol: tableData.value[i].selectedProtocol
    });
  }
  let tableDataString = readInfo
    .map(
      item =>
        `${item.inputGatewayId},${item.selectedInterface},${item.selectedProtocol}`
    )
    .join(";");

  let parentObj = {
    id: devVarTableSelectedItem.value.id,
    deviceType: devVarTableSelectedItem.value.deviceType, // 设备类型
    deviceName: devVarTableSelectedItem.value.deviceName, // 设备名称
    deviceDescription: devVarTableSelectedItem.value.deviceDescription, // 设备描述
    state: 1, // 0:未适配，1：已适配
    gatewayId: devVarTableSelectedItem.value.gatewayId, // 网关Id
    createUser: tableDataString, // 表格数据
    updateUser: "", // 修改人
    isDeleted: 0, // 0：未删除，1：已删除
    connector: devVarTableSelectedItem.value.connector, // 接入口
    protocol: ruleForm1.value.selectedProtocol, // 协议
    passiveAddress: "", // 从站地址
    passiveIp: "", // 从站ip
    passivePort: "", // 端口号
    protocolType: "", // 协议类型
    protocolAddress: "", // 协议地址
    protocolNumber: "", // 协议数量
    targetAddress: "", // 目标地址
    targetPort: "", // 目标端口
    deviceAccount: "", // 设备账户
    devicePassword: "", // 设备密码
    clientId: "", // ClientID
    subscribeTopic: "", // 订阅主题
    releaseTopic: "", // 发布主题
    qos: "", // QOS
    clearSession: "", // 清理会话状态
    url: "", // URL
    securityPolicy: "", // 安全策略
    nodePath: "", // 节点路径
    certificates: "", // 证书和密钥
    readingMethod: "", // 数据读取方法
    timeoutSetting: "", // 超时设置
    baudRate: "", // 波特率
    dataBit: "", // 数据位
    stopBit: "", // 停止位
    verify: "", // 校验
    frameFormat: "", // 帧格式
    frameType: "", // 帧类型
    frameId: "", // 帧ID
    wifiAccount: "", // WIFI账号
    wifiPassword: "", // WIFI密码
    isSelected: 1 // 是否选中
  };

  const submitObject = { ...parentObj, ...childObject };

  modifyDeviceList(submitObject).then(res => {
    if (res.status === 200) {
      // compileRate.value = 0;
      // issueRate.value = 0;
      // protocolStatus.value = '配置中';
      // gatewayStatus.value = '预运行';
      // compileDisabled.value = true;
      // setTimeout(() => {
      //   protocolStatus.value = '配置完成';
      //   gatewayStatus.value = '预运行';
      //   compileDisabled.value = false;
      // }, 2000);
      emit("childGetApiTableDataList");
    } else {
      message(res.message, { type: "error" });
    }
  });
};
// 在适当的地方更新 state 的值
function updateState(value) {
  state.value = value;
}
</script>

<template>
  <el-drawer
    :model-value="collectSettingDrawer"
    direction="rtl"
    @open="handleOpen"
    @close="handleClose"
  >
    <template #header />
    <template #default>
      <div class="drawer-main">
        <el-divider content-position="left">采集设置</el-divider>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm1"
          :inline="true"
          label-position="top"
        >
          <el-form-item
            label="采集周期"
            prop="selectPeriod"
            style="width: 30%"
            :rules="{
              required: true,
              message: '请选择采集周期',
              trigger: 'change'
            }"
          >
            <el-select
              v-model="ruleForm1.selectPeriod"
              placeholder="请选择采集周期"
              clearable
            >
              <el-option label="200ms" value="200ms" />
              <el-option label="300ms" value="300ms" />
              <el-option label="400ms" value="400ms" />
              <el-option label="500ms" value="500ms" />
            </el-select>
          </el-form-item>
          <el-form-item
            label="存储格式"
            prop="selectedFormat"
            style="width: 28%"
            :rules="{
              required: true,
              message: '请选择存储格式',
              trigger: 'change'
            }"
          >
            <el-select
              v-model="ruleForm1.selectedFormat"
              placeholder="请选择存储格式"
              clearable
            >
              <el-option label="JSON" value="JSON" />
              <el-option label="CVS" value="CVS" />
              <el-option label="XML" value="XML" />
            </el-select>
          </el-form-item>
          <el-form-item
            label="协议"
            style="width: 25%"
            prop="selectedProtocol"
            :rules="{
              required: true,
              message: '请选择协议',
              trigger: 'change'
            }"
          >
            <el-select
              v-model="ruleForm1.selectedProtocol"
              placeholder="请选择协议"
              @change="protocolChange"
            >
              <el-option
                v-for="item in protocolOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <div class="form-table">
          <el-table
            ref="multipleTableRef"
            class="custom-table"
            :data="tableData"
            border
            stripe
            max-height="200"
            @selection-change="handleSelectionChange"
          >
            <!-- <el-table-column type="selection" align="center" /> -->
            <el-table-column
              prop="inputGatewayId"
              label="网关ID"
              align="center"
            />
            <el-table-column
              prop="selectedInterface"
              label="接口"
              align="center"
            />
            <el-table-column
              prop="selectedProtocol"
              label="协议"
              align="center"
            />
          </el-table>
        </div>
        <div class="drawer-two">
          <el-divider content-position="left">参数配置</el-divider>
          <div class="form-title">{{ protocolLabel }}</div>
          <keep-alive>
            <component
              :is="component"
              ref="childFuncRef"
              :public-form="publicForm"
              :devVarTableSelected-item="devVarTableSelectedItem"
              @childFormObj="childFormObjChange"
            />
          </keep-alive>
        </div>
        <el-divider content-position="left">远程kafka服务器设置</el-divider>
        <el-form
          ref="ruleFormRefServer"
          :model="ruleFormServer"
          :inline="false"
          label-position="top"
        >
          <el-form-item
            label="Bootstrap Servers"
            prop="inputServer"
            :rules="{
              required: true,
              message: '请输入Bootstrap Servers',
              trigger: 'blur'
            }"
          >
            <el-input
              v-model="ruleFormServer.inputServer"
              placeholder="10.8.58.1:6443"
            />
          </el-form-item>
          <el-form-item
            label="Topics"
            prop="inputTopics"
            :rules="{
              required: true,
              message: '请输入Topics',
              trigger: 'blur'
            }"
          >
            <el-input
              v-model="ruleFormServer.inputTopics"
              placeholder="topic-dataLake"
            />
          </el-form-item>
          <!-- <el-form-item>
            <div class="form-item-button">
              <el-button type="primary" @click="configClick1(ruleFormRefServer)"
                >配置</el-button
              >
            </div>
          </el-form-item> -->
        </el-form>
        <el-divider content-position="left">状态</el-divider>
        <div class="button-box">
          <el-button
            type="primary"
            style="width: 100%; margin-bottom: 10px"
            @click="startCollectClick(ruleFormRef)"
            >开始采集</el-button
          >
          <!-- <el-button type="primary" @click="stopCollectClick" :disabled="isDisabled">停止采集</el-button> -->
        </div>
        <!-- <div class="button-box">
          <el-alert
            :title="alertTitle"
            :type="alertStatus"
            :closable="false"
            effect="dark"
            center
            :show-icon="true"
          />
        </div> -->
      </div>
    </template>
    <template #footer>
      <div style="flex: auto">
        <!-- <el-button @click="cancelClick">取消</el-button> -->
        <el-button type="primary" @click="confirmClick">确定</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<style lang="scss" scoped>
.custom-message {
  font-size: 28px; /* 调整字体大小 */
  font-weight: bold; /* 加粗 */
}

.form-table {
  padding-bottom: 20px;
}

.btn-box {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.form-item-button {
  width: 100%;
  text-align: right;
}

.button-box {
  display: flex;
  flex-direction: flex-end;
  .button-margin {
    margin-right: 30px;
  }
}

.drawer-two {
  flex: auto;
  .form-title {
    font-size: 18px;
    font-weight: 700;
    padding-bottom: 18px;
  }
}
</style>
